import React from 'react';
import { Button, Menu, message } from 'antd';
const Item = Menu.Item;
import {WeaErrorPage, WeaTools, WeaDialog, WeaLeftRightLayout, WeaRightMenu, WeaLocaleProvider} from 'ecCom';
import HpBaseElement from './HpBaseElement';
const getLabel = WeaLocaleProvider.getLabel;
import Homepage from './Homepage';
import { handlePortalSynize, onShowOrHideAllE, openFavouriteBrowser, showHelp } from '../util/rcmenu';
//门户组件
class SynergyPortalSetting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            params: {},
            loading: false,
            data: {
                hpbaseelements:[],
                hpsettingmenu:[],
                rcmenu:[],
            },
            showLeft: true,
            showDrop: false,
            isShrink: false,
        }
        this.onChangeLabel = this.onChangeLabel.bind(this);
        this.onShowDrop = this.onShowDrop.bind(this);
        this.getButtons = this.getButtons.bind(this);
        this.getRightMenu = this.getRightMenu.bind(this);
        this.onRightMenuClick = this.onRightMenuClick.bind(this);
        this.handleRefreshPortal = this.handleRefreshPortal.bind(this);
        this.handleAddElementToPortalStart = this.handleAddElementToPortalStart.bind(this);
        this.handleAddElementToPortal = this.handleAddElementToPortal.bind(this);
    }
    onShowDrop(){
        this.setState({
            showDrop: !this.state.showDrop,
        });
    }
    getButtons(){
        let btns = [];
        const { hpsettingmenu } = this.state.data;
        hpsettingmenu.map((menu, i)=>{
            if(menu.key == 'more'){
                btns.push(<OperateMenu ecId={`${this && this.props && this.props.ecId || ''}_OperateMenu@wyzpo8@${menu.key}`} dropMenuDatas={this.getRightMenu()} onShowDrop={this.onShowDrop} onDropMenuClick={this.onRightMenuClick} showDrop={this.state.showDrop}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zjmas4@${menu.key}`} onClick={this.onShowDrop}>{menu.label}</Button></OperateMenu>); 
            }else{
                btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fax57v@${menu.key}`} type={i === 4 ? '' : 'primary'} onClick={this.onRightMenuClick.bind(this,menu.key)}>{menu.label}</Button>); 
            }
        });
        return btns;
    }
    getRightMenu(){
        let btns = [];
        const { rcmenu } = this.state.data;
        if(rcmenu){
            rcmenu.map(menu=>{
                btns.push({
                    key: menu.key,
                    icon: <i className={menu.icon}/>,
                    content: menu.label,
                }); 
            });
        }
        return btns
    }
    onChangeLabel(list, key, bool, label1, lable2){
        for (let i =0; i < list.length; i++) {
            let item = list[i] || {};
            if(item.key == key){
                if(bool){
                    item.label = label1;
                    if(item.label=="全部收缩"||item.label=="Shrink All "){
                        item.icon = "icon-coms-All-contraction"
                    }
                    if(item.label=="显示元素库"||item.label=="顯示元素庫"||item.label=="Show Element Lib "||item.label=="Display element library "||item.label=="显示元素庫"){
                        item.icon = "icon-coms-display"
                    }
                    if(item.label=="全部展开"||item.label=="outspread all "||item.label=="全部展開"){
                        item.icon = "icon-coms-All-unfolding"
                    }
                    if(item.label=="隐藏元素库"||item.label=="Hidden element library "||item.label=="隱藏元素庫"){
                        item.icon = "icon-coms-hide"
                    }
                }else{
                    item.label = lable2;
                    if(item.label=="全部收缩"||item.label=="Shrink All "){
                        item.icon = "icon-coms-All-contraction"
                    }
                    if(item.label=="显示元素库"||item.label=="顯示元素庫"||item.label=="Show Element Lib "||item.label=="Display element library "||item.label=="显示元素庫"){
                        item.icon = "icon-coms-display"
                    }
                    if(item.label=="全部展开"||item.label=="outspread all "||item.label=="全部展開"){
                        item.icon = "icon-coms-All-unfolding"
                    }
                    if(item.label=="隐藏元素库"||item.label=="Hidden element library "||item.label=="隱藏元素庫"){
                        item.icon = "icon-coms-hide"
                    }
                }
                break;
            }
        }
    }
    onRightMenuClick(key){
        const { params, showLeft, isShrink, data } = this.state;
        const { hpid, subCompanyId, isSetting } = params;
        switch(key){
            case 'updatesynihp':
            case 'completesynihp':
                handlePortalSynize({
                    hpid: hpid,
                    subCompanyId: subCompanyId,
                    method: key
                });
                break;
            case 'shrinkAll':
                this.setState({
                    isShrink: !isShrink
                });
                this.onChangeLabel(data.rcmenu,'shrinkAll', this.state.isShrink, getLabel(18466, '全部收缩') ,getLabel(16216, '全部展开'));
                this.onChangeLabel(data.hpsettingmenu,'shrinkAll', this.state.isShrink, getLabel(18466, '全部收缩') , getLabel(16216, '全部展开'));
                onShowOrHideAllE(isSetting, !isShrink);
                break;
            case 'store':
                openFavouriteBrowser();
                break;
            case 'help':
                showHelp();
                break;
            case 'hiddenElementLib':
                this.setState({
                    showLeft: !showLeft
                });
                this.onChangeLabel(data.rcmenu,'hiddenElementLib', this.state.showLeft,getLabel(19613,"显示元素库"), getLabel(19614,"隐藏元素库"));
                this.onChangeLabel(data.hpsettingmenu,'hiddenElementLib', this.state.showLeft,getLabel(19613,"显示元素库"), getLabel(19614,"隐藏元素库"));
                break;
        }
    }
    componentWillMount(){
        const { params } = this.props;
        this.getData(params);
    }
    componentWillReceiveProps(nextProps) {
        const { params } = this.props;
        const { params:nextParams } = nextProps;
        if (params.hpid != nextParams.hpid) {
            this.getData(nextParams);
        }
    }
    getData(params) {
        this.setState({loading: true});
        WeaTools.callApi('/api/portal/hpsetting/hpsettinginfo', 'POST', {...params, isSynergySetting: true}).then((data) => {
            if(data.status == '2'){
                message.error(data.errormsg);
                return;
            }
            this.setState({
                params,
                loading: false,
                data,
            });
        });
    }
    handleRefreshPortal(params){
        this.refs.homepage.handleRefresh(params);
    }
    handleAddElementToPortalStart() {
        // this.setState({loading: true});
    }
    handleAddElementToPortal(element, areaflag, index){
        // this.setState({loading: false});
        // this.refs.homepage.handleAddElement(element, areaflag, index);
        this.handleRefreshPortal({});
    }
    render() {
        const { params, data, showLeft } = this.state;
        const { hpid, subCompanyId, isSetting } = params;
        if(!hpid) return <div/>
        return <div style={{height: '100%'}}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@2mydw1`} datas={this.getRightMenu()} onClick={this.onRightMenuClick}>
                <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@ktlzxy`}
                    isNew={true}
                    showLeft={showLeft}
                    leftWidth={150}
                    leftCom={<HpBaseElement ecId={`${this && this.props && this.props.ecId || ''}_HpBaseElement@1uegsy`} isSynergySetting={true} handleRefreshPortal={this.handleRefreshPortal} handleAddStart={this.handleAddElementToPortalStart} handleAdd={this.handleAddElementToPortal} params={params} list={data.hpbaseelements}/>}
                    onCollapse={bool => {
                        this.setState({showLeft: bool});
                        this.onChangeLabel(data.rcmenu,'hiddenElementLib', bool, getLabel(19614,"隐藏元素库"),getLabel(19613,"显示元素库"));
                        this.onChangeLabel(data.hpsettingmenu,'hiddenElementLib', bool, getLabel(19614,"隐藏元素库"), getLabel(19613,"显示元素库"));
                    }}
                >
                  <div id="e9PortalSetting" className="portal-e9setting" style={{height: '100%'}}>
                      <Homepage ecId={`${this && this.props && this.props.ecId || ''}_Homepage@j17v7v`} ref="homepage" hpid={hpid} isSetting={true} isSynergySetting={true} synergyParams={params} />
                  </div>
              </WeaLeftRightLayout>
           </WeaRightMenu>
        </div>
    }
}
class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
        return ( <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@3gwk94`} msg={ hasErrorMsg ? this.props.error :getLabel(385218,"对不起，该页面异常，请联系管理员！") }/>
        );
    }
}
SynergyPortalSetting = WeaTools.tryCatch(React, MyErrorHandler, {error: ""})(SynergyPortalSetting);
export default SynergyPortalSetting;


class OperateMenu extends React.Component{
    render(){
        const { dropMenuDatas, onDropMenuClick, onShowDrop, showDrop, children } = this.props;
        const menu = dropMenuDatas
            ? <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@wez1bg`} mode='vertical' onClick={o => {
              if (typeof onDropMenuClick === 'function') onDropMenuClick(o.key);
              dropMenuDatas.forEach(d => {
                if (d.key === o.key && typeof d.onClick === 'function') d.onClick(o.key);
              });
            }}
            >
              {
                dropMenuDatas.map((d, i) => {
                  return (
                    <Item ecId={`${this && this.props && this.props.ecId || ''}_Item@dh1r3g@${d.key || i}`} key={d.key || i} disabled={d.disabled}>
                      <span className='wea-right-menu-icon'>{d.icon}</span>
                      {d.content}
                     </Item>
                  );
                })
              }
            </Menu>
            : '';
        return <div className='portal-portalsetting-moremenu-pop'>
                <div className='wea-new-top-drop-menu wea-right-menu' style={{display: showDrop ? 'block' : 'none'}} onMouseLeave={onShowDrop}>
                    <div className='wea-right-menu-icon-background'></div>
                    {menu}
                </div>
                {children}
                </div>

    }
}




